<template>
    <div class="wrapper">
        <minbar :isPadding="true">
            <div slot="middle" class="x-suosou">
                <text class="x-sousuo-icon iconfont">&#xe677;</text>
                <input class="x-sousuo-text" placeholder="搜索商品" 
                    v-model="listParam.keyword" 
                    @change="inputChange"/>
            </div>
        </minbar>
        <!-- 顶部的tab页 -->
        <x-filter :tabTitles="tabTitles" @itemClick="tabItemClick"></x-filter>
        <x-list ref="clist" :config="configData" 
            @receiveData="receiveData"
           :param="listParam" 
           :first="false"
           style="margin-top:1px;">
           <div slot="content" class="x-content">
               <div class="x-content-div" v-for="(v,i) in listData" :key="i" @click="openDetail(v)">
                   <image class="x-image" :src="v.thumb"></image>
                   <text class="x-content-title">{{v.name}}</text>
                   <!-- <div class="x-content-row">
                       <text class="x-content-price">¥:{{getPrice(v.sku_list)}}</text>
                   </div> -->
               </div>
           </div>
        </x-list>
        <x-popup :show="showMenu" pos="right" poptop="0" width="600" @popupClicked="closeMenu">
            <div slot="popup_content" class="popup_content">
                <!-- 品牌 -->
                <text class="x-type">品牌</text>
                <div class="x-brand-content">
                    <div class="x-brand-div padding-bottom15" 
                        v-for="(v,index) in brandData"
                        :key="index"
                        @click="brandClick(v.id,'brand_id')">
                        <text :class="['x-brand-text',getSelect(v,'brand_id')?'x-active':'']">{{v.name}}</text>
                    </div>
                </div>
                <!-- 分类 -->
                <text class="x-type">分类</text>
                <div class="x-brand-content">
                    <div class="x-brand-div padding-bottom15" 
                        v-for="(v,index) in categoryData"
                        :key="index"
                        @click="brandClick(v.id,'category_id')">
                        <text :class="['x-brand-text',getSelect(v,'category_id')?'x-active':'']">{{v.name}}</text>
                    </div>
                </div>
            </div>
        </x-popup>
    </div>   
</template>

<script>
import asCore from "../../../common/js/core";
const navigator = weex.requireModule('navigator');
export default {
    components:{
        "minbar" : require("../../../common/component/minbar.vue"),
        "x-list" : require("../../../common/component/list.vue"),
        "x-filter" : require("../../../common/component/filter.vue"),
        "x-popup" : require("../../../common/component/popup.vue")
    }, 
    data () {
        return {
            tabTitles:[
                {
                    title:"默认",
                    select:true,
                    isclick:false,
                    showarrow:false
                },{
                    title:"价格",
                    select:false,
                    isclick:false,
                    showarrow:true
                },{
                    title:"筛选",
                    select:false,
                    isclick:false,
                    showarrow:true
                }
            ],
            /* 列表action配置 */
            configData:{
                pageRow:{
                    page:1,
                    limit:10
                },
                action:"/goods/search"
            },
            listParam:{},
            listData:[],
            brandData:[],
            categoryData:[],
            showMenu:false,
        }
    },
    created() {
        var _this = this;
        var globalEvent = weex.requireModule('globalEvent') ;
        globalEvent.addEventListener("onPageInit", function (e) {
            
            var param = navigator.param();
            if(param){
                param['categoryid'] && 
                (_this.listParam['category_id'] = param['categoryid']);
            }
            _this.$refs.clist.refreshData()
            _this.getBrandData();
            _this.getCategoryData();
        });
    },
    methods:{
        /**筛选的点击事件 */
        tabItemClick(isclick,index){
            for(var i in this.tabTitles){
                this.tabTitles[i].select = false;
            }
            this.tabTitles[index].select = true;
            if(index==0){
                delete this.listParam.brand_id;
                delete this.listParam.category_id;
                this.$refs.clist.refreshData();
            }if(index==1){
                if(isclick==false){
                    this.tabTitles[index].isclick = true;
                }else{
                    this.tabTitles[index].isclick = false;
                }
            } else if(index==2){
                if(isclick==false){
                    this.showMenu = true;
                    this.tabTitles[index].isclick = true;
                }else{
                    this.showMenu = false;
                    this.tabTitles[index].isclick = false;
                }

            }
        },
        closeMenu(){
            this.showMenu = false;
            this.tabTitles[2].isclick = false;
        },
       /**接收数据 */
       receiveData(type,data){
          if(type=="refresh"){
            this.listData = data;
          }else{
            this.listData.push(...data);
          }
       },
       /**获取价格 */
       getPrice(data){
           if(data && data.length>0){
               var price = data[0]['price'];
               return price.toFixed(2);
           }
       },
       /**获取品牌 */
       getBrandData(){
           asCore.post("/goods/brand/list",{},(data,msg,flag)=>{
                if(flag==true){
                    this.brandData = data;
                }
           });
       },
       /**获取分类 */
       getCategoryData(){
           asCore.post("/goods/category/list",{},(data,msg,flag)=>{
                if(flag==true){
                    this.categoryData = data;
                }
           });
       },
       /**点击品牌 */
       brandClick(id,type){
           var pid = this.listParam[type];
           if(pid==id){
               delete this.listParam[type];
           }else{
               this.listParam[type] = id;
           }
           this.$refs.clist.refreshData();
       },
       /**获取是否选中 */
       getSelect(data,type){
            var pid = this.listParam[type];
            if(pid==data.id){
                return true;
            }else{
                return false;
            }
       },
       /**搜索内容 */
       inputChange(event){
           !event.value && delete this.listParam['keyword']
           this.$refs.clist.refreshData();
       },
       /**点击商品 */
       openDetail(data){
           navigator.pushParam(
                asCore.localpath + "tailor/app/shopinfo/shopinfo.js",{
                    data:data
                }
            );
       }
    }
}
</script>
<style scoped>
.wrapper{
   background-color: #dedfe1;
}
.iconfont{
    font-family: iconfont;
}
.x-content {
    padding:15px;
    background-color: #fff;
}
.x-content-div {
    border-color: #d4d4d4;
    border-width: 1px;
    margin-bottom: 15px;
}
.x-image {
    width: 720px;
    height: 400px;
}
.x-suosou {
    background-color: #fff;
    height: 60px;
    width: 400px;
    border-radius: 50px;
    margin-top:10px;
    flex-direction: row;
    align-items: center;
    padding-left: 25px;
}
.x-sousuo-icon {
    color: #654d21;
    font-size:35px;
    top:3px;
    margin-right: 10px;
}
.x-sousuo-text {
    color: #654d21;
    font-size:30px;
    flex: 1;
    height: 60px;
}
.x-content-title {
    color: #1f1e23;
    font-size: 32px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left: 15px;
}
.x-content-row {
    flex-direction: row;
}
.x-content-price {
    color: #af0a2a;
    font-size:35px;
    padding-left: 15px;
    padding-bottom:25px;
}
.x-type {
    color:#1f1e23;
    font-size:32px;
    padding-left:15px;
    height: 80px;
    line-height: 80px;
}
.x-brand-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left:8px;
    padding-right: 8px;
    padding-bottom: 10px;
}
.x-brand-text {
    margin:11px;
    margin-bottom:15px;
    width: 170px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color:#1f1e24;
    font-size: 30px;
    background-color: #dedfe1;
}
.x-active {
    color:#fff;
    background-color: #654d21;
}
</style>